
<template>
 <div class=" w-full  flex flex-col min-h-full min-w-full absolute" id="box">
   <main-header></main-header>
   <div class="mt-20   flex flex-col basis-2/3 flex-grow items-center border-b">
     <h1 class="hover:cursor-pointer" @click="updateHead">点击修改你的头像</h1>
     <label for="upload"><img :src="picSrc" class="w-54 h-54 rounded-full hover:brightness-50" /></label>
     <input type="file" id="upload" class="hidden" @change="handleSelectPic">
     <h1 class="text-2xl">{{nickName}}</h1>
     <hr>
   </div>
   <div class="text-center">
     <h1>发布的资源信息卡片</h1>
     <context-box class="m-auto"></context-box>
   </div>
   <ContainerFooter></ContainerFooter>
 </div>

</template>

<script>

import MainHeader from "@/components/MainHeader.vue";
import ContainerFooter from "@/components/ContainerFooter.vue";
import axios from "axios";
import ContextBox from "@/userManage/components/ContextBox.vue";
import ObsClient from "esdk-obs-browserjs";
import {v4 as uuidv4} from 'uuid'

export default {
  name: "App",
  data(){
    return {
      picSrc:"",
      nickName:"",
      selectPic:null,
     userId:-1
    }
  },
  methods: {

   handleSelectPic(event){
     this.selectPic = event.target.files[0];
   },

    updateHead(){
     console.log("updateHead")
     const uuid=uuidv4();
      const obsClient = new ObsClient({
        access_key_id: "EC6NJERUTMSFVKRZ1QSJ",
        secret_access_key_id: "G61l6MjbSE1IKRY7Hb6daQ4IaeZCJx4nq79ohmmd",
        server:"https://obs.cn-south-1.myhuaweicloud.com"
      })
      obsClient.putObject({
           Bucket:"dmsgame",
        Key:`JavaEEObject/头像/${uuid+this.selectPic.name}`,
        SourceFile:this.selectPic,
      },(err)=>{
        console.log(err)
        if(!err){
          const form = new FormData();
          form.append("userId", this.userId);
          form.append("Head_pic", `https://dmsgame.obs.cn-south-1.myhuaweicloud.com/JavaEEObject/头像/${uuid+this.selectPic.name}`);
          axios.post("http://113.44.66.99:8080/updateHeadPic",form,).then((res)=>{
            console.log(res);
          })
        }
      })

  }
  },
  components: {ContextBox, ContainerFooter, MainHeader},
created() {

},
  mounted() {
    console.log("Component mounted.")
    const token=localStorage.getItem("token")
    console.log(localStorage.getItem("token"))
    axios.post("http://113.44.66.99:8080/getUserMessage",{},{
      headers:{
        Authorization:token
      }
    }).then(res=>{
      console.log(res.data)
      if(res.data.code==0){
        this.nickName=res.data.data.userNickName;
        this.picSrc=res.data.data.head_pic;
        this.userId=res.data.data.userId;
      }
    })

  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}

#box{
  background: linear-gradient(0deg, #FFD2F7 0%,#a6c1ee 69%), linear-gradient(45deg, #DDF0FF 22%,#2980b9 75%);
}


</style>